<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>jquery点击弹出框城市选择器代码</title>
    <link rel="stylesheet" type="text/css" media="all" href="http://localhost:8081//cityselect/tyle.css">


    <script src="http://localhost:8081//cityselect/jquery-1.9.1.min.js"></script>

</head>

<body>


<input type="text" placeholder="选择城市" id="place" name="">

<!-- 城市 -->
<div id="in_city" style="top: 47px; left: 10px; width: 345px; display: block;">

    <h1>请选择城市</h1>
    <div class="screen"><a href="javascript:void(0)" class="shar">热门</a><a href="javascript:void(0)"
                                                                           class="">ABCDEFG</a><a
            href="javascript:void(0)" class="">HIJKL</a><a href="javascript:void(0)" class="">MNOPQRST</a><a
            href="javascript:void(0)" class="">WXYZ</a></div>
    <div class="city_pos">
        <div class="city_a_le1"><a href="javascript:void(0)">北京</a><a href="javascript:void(0)">上海</a><a
                href="javascript:void(0)">重庆</a><a href="javascript:void(0)">深圳</a><a href="javascript:void(0)">广州</a><a
                href="javascript:void(0)">杭州</a><a href="javascript:void(0)">南京</a><a href="javascript:void(0)">苏州</a><a
                href="javascript:void(0)">天津</a><a href="javascript:void(0)">成都</a><a href="javascript:void(0)">南昌</a><a
                href="javascript:void(0)">三亚</a><a href="javascript:void(0)">青岛</a><a href="javascript:void(0)">厦门</a><a
                href="javascript:void(0)">西安</a><a href="javascript:void(0)">长沙</a></div>
        <div class="city_a_le1" style="display: none">
            <div class="Letter"><span>A</span>
                <div><a href="javascript:void(0)">安庆</a><a href="javascript:void(0)">阿泰勒</a><a
                        href="javascript:void(0)">安康</a><a href="javascript:void(0)">阿克苏</a></div>
            </div>
            <div class="Letter"><span>B</span>
                <div><a href="javascript:void(0)">北京</a><a href="javascript:void(0)">包头</a><a href="javascript:void(0)">北海</a><a
                        href="javascript:void(0)">百色</a><a href="javascript:void(0)">保山</a></div>
            </div>
            <div class="Letter"><span>C</span>
                <div><a href="javascript:void(0)">重庆</a><a href="javascript:void(0)">成都</a><a href="javascript:void(0)">长沙</a><a
                        href="javascript:void(0)">长治</a><a href="javascript:void(0)">长春</a><a href="javascript:void(0)">常州</a><a
                        href="javascript:void(0)">昌都</a><a href="javascript:void(0)">朝阳</a><a href="javascript:void(0)">常德</a><a
                        href="javascript:void(0)">长白山</a><a href="javascript:void(0)">赤峰</a></div>
            </div>
            <div class="Letter"><span>D</span>
                <div><a href="javascript:void(0)">大同</a><a href="javascript:void(0)">大连</a><a href="javascript:void(0)">达县</a><a
                        href="javascript:void(0)">东营</a><a href="javascript:void(0)">大庆</a><a href="javascript:void(0)">丹东</a><a
                        href="javascript:void(0)">大理</a><a href="javascript:void(0)">敦煌</a></div>
            </div>
            <div class="Letter"><span>E</span>
                <div><a href="javascript:void(0)">鄂尔多斯</a><a href="javascript:void(0)">恩施</a></div>
            </div>
            <div class="Letter"><span>F</span>
                <div><a href="javascript:void(0)">福州</a><a href="javascript:void(0)">阜阳</a></div>
            </div>
            <div class="Letter"><span>G</span>
                <div><a href="javascript:void(0)">广州</a><a href="javascript:void(0)">贵阳</a><a href="javascript:void(0)">桂林</a><a
                        href="javascript:void(0)">广元</a><a href="javascript:void(0)">格尔木</a></div>
            </div>
        </div>
        <div class="city_a_le1" style="display: none">
            <div class="Letter"><span>H</span>
                <div><a href="javascript:void(0)">杭州</a><a href="javascript:void(0)">合肥</a><a href="javascript:void(0)">呼和浩特</a><a
                        href="javascript:void(0)">哈密</a><a href="javascript:void(0)">黑河</a><a href="javascript:void(0)">海拉尔</a><a
                        href="javascript:void(0)">哈尔滨</a><a href="javascript:void(0)">海口</a><a
                        href="javascript:void(0)">黄山</a><a href="javascript:void(0)">邯郸</a><a href="javascript:void(0)">汉中</a><a
                        href="javascript:void(0)">和田</a></div>
            </div>
            <div class="Letter"><span>J</span>
                <div><a href="javascript:void(0)">晋江</a><a href="javascript:void(0)">锦州</a><a href="javascript:void(0)">景德镇</a><a
                        href="javascript:void(0)">嘉峪关</a><a href="javascript:void(0)">井冈山</a><a
                        href="javascript:void(0)">济宁</a><a href="javascript:void(0)">九江</a><a href="javascript:void(0)">佳木斯</a><a
                        href="javascript:void(0)">济南</a></div>
            </div>
            <div class="Letter"><span>K</span>
                <div><a href="javascript:void(0)">喀什</a><a href="javascript:void(0)">昆明</a><a href="javascript:void(0)">康定</a><a
                        href="javascript:void(0)">克拉玛依</a><a href="javascript:void(0)">库尔勒</a><a
                        href="javascript:void(0)">库车</a></div>
            </div>
            <div class="Letter"><span>L</span>
                <div><a href="javascript:void(0)">兰州</a><a href="javascript:void(0)">洛阳</a><a href="javascript:void(0)">丽江</a><a
                        href="javascript:void(0)">林芝</a><a href="javascript:void(0)">柳州</a><a href="javascript:void(0)">泸州</a><a
                        href="javascript:void(0)">连云港</a><a href="javascript:void(0)">黎平</a><a
                        href="javascript:void(0)">连成</a><a href="javascript:void(0)">拉萨</a><a href="javascript:void(0)">临沧</a><a
                        href="javascript:void(0)">临沂</a></div>
            </div>
        </div>
        <div class="city_a_le1" style="display: none">
            <div class="Letter"><span>M</span>
                <div><a href="javascript:void(0)">芒市</a><a href="javascript:void(0)">牡丹江</a><a
                        href="javascript:void(0)">满洲里</a><a href="javascript:void(0)">绵阳</a><a
                        href="javascript:void(0)">梅县</a><a href="javascript:void(0)">漠河</a></div>
            </div>
            <div class="Letter"><span>N</span>
                <div><a href="javascript:void(0)">南京</a><a href="javascript:void(0)">南昌</a><a href="javascript:void(0)">内蒙古</a><a
                        href="javascript:void(0)">南充</a><a href="javascript:void(0)">南宁</a><a href="javascript:void(0)">南阳</a><a
                        href="javascript:void(0)">南通</a><a href="javascript:void(0)">那拉提</a><a
                        href="javascript:void(0)">宁波</a></div>
            </div>
            <div class="Letter"><span>P</span>
                <div><a href="javascript:void(0)">攀枝花</a></div>
            </div>
            <div class="Letter"><span>Q</span>
                <div><a href="javascript:void(0)">青岛</a><a href="javascript:void(0)">衢州</a><a href="javascript:void(0)">秦皇岛</a><a
                        href="javascript:void(0)">庆阳</a><a href="javascript:void(0)">齐齐哈尔</a></div>
            </div>
            <div class="Letter"><span>S</span>
                <div><a href="javascript:void(0)">上海</a><a href="javascript:void(0)">深圳</a><a href="javascript:void(0)">苏州</a><a
                        href="javascript:void(0)">三亚</a><a href="javascript:void(0)">石家庄</a><a
                        href="javascript:void(0)">沈阳</a><a href="javascript:void(0)">思茅</a></div>
            </div>
            <div class="Letter"><span>T</span>
                <div><a href="javascript:void(0)">天津</a><a href="javascript:void(0)">铜仁</a><a href="javascript:void(0)">塔城</a><a
                        href="javascript:void(0)">腾冲</a><a href="javascript:void(0)">台州</a><a href="javascript:void(0)">通辽</a><a
                        href="javascript:void(0)">太原</a></div>
            </div>
        </div>
        <div class="city_a_le1" style="display: none">
            <div class="Letter"><span>W</span>
                <div><a href="javascript:void(0)">威海</a><a href="javascript:void(0)">梧州</a><a href="javascript:void(0)">文山</a><a
                        href="javascript:void(0)">无锡</a><a href="javascript:void(0)">潍坊</a><a href="javascript:void(0)">武夷山</a><a
                        href="javascript:void(0)">乌兰浩特</a><a href="javascript:void(0)">温州</a><a
                        href="javascript:void(0)">乌鲁木齐</a><a href="javascript:void(0)">万州</a><a
                        href="javascript:void(0)">乌海</a></div>
            </div>
            <div class="Letter"><span>X</span>
                <div><a href="javascript:void(0)">厦门</a><a href="javascript:void(0)">西安</a><a href="javascript:void(0)">西藏</a><a
                        href="javascript:void(0)">兴义</a><a href="javascript:void(0)">西昌</a><a href="javascript:void(0)">襄樊</a><a
                        href="javascript:void(0)">西宁</a><a href="javascript:void(0)">锡林浩特</a><a
                        href="javascript:void(0)">西双版纳</a><a href="javascript:void(0)">徐州</a></div>
            </div>
            <div class="Letter"><span>Y</span>
                <div><a href="javascript:void(0)">义乌</a><a href="javascript:void(0)">永州</a><a href="javascript:void(0)">榆林</a><a
                        href="javascript:void(0)">延安</a><a href="javascript:void(0)">运城</a><a href="javascript:void(0)">烟台</a><a
                        href="javascript:void(0)">银川</a><a href="javascript:void(0)">宜昌</a><a href="javascript:void(0)">宜宾</a><a
                        href="javascript:void(0)">盐城</a><a href="javascript:void(0)">延吉</a><a href="javascript:void(0)">玉树</a><a
                        href="javascript:void(0)">伊宁</a></div>
            </div>
            <div class="Letter"><span>Z</span>
                <div><a href="javascript:void(0)">珠海</a><a href="javascript:void(0)">昭通</a><a href="javascript:void(0)">张家界</a><a
                        href="javascript:void(0)">舟山</a><a href="javascript:void(0)">郑州</a><a href="javascript:void(0)">中卫</a><a
                        href="javascript:void(0)">芷江</a><a href="javascript:void(0)">湛江</a></div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="http://localhost:8081//cityselect/cityTemplate.js"></script>
<script type="text/javascript">
    var cityA = $(".city_a_le1 a"); //城市
    var pla = $("#place");  //出发地
    var dest = $("#destination");  //目的地
    // 默认值
    inCity.width = "345";  //城市选择框  宽
    inCity.height = "auto";  //城市选择框  高
    inCity.id = "#in_city";  //城市选择框  父级ID
    inCity.Children = '.city_a_le1';  //城市名box
    inCity.Hot(cityA);
    //城市 导航
    var apay = $(".screen a");

    var placeThis; //当前选择标签
    apay.click(function (obj) {  //城市导航
        inCity.payment($(this));
    })
    inCity.place(pla); //出发地
    inCity.destination(dest);  //目的地
    inCity.cityClick(cityA); //显示赋值城市
</script>


</body>
</html>